// ===========================================
// Добавляем блоки, которые нужно анимировать
// ===========================================
var classes = [
    '.f-header',
    '.f-subheader',
    '.f-description',
    '.f-text',
    '.f-btn',
    '.part-quote',
    '.popup-box',
    '.builder',
    '.lt-tsr-block',
   	'.authcontainer',
    '.col-md-5',
    '.leftimage',
    '.rightimage',
    '.part-image',
    'div.icon'
];


// ===========================================================
//	Добавляем анимацию(Animate.css), которая нужна на странице
//	Пример:
//		Для прокрутки вниз нужна анимация fadeIn,
//		для прокрутки вверх - fadeOut.
//		Добавляем строчку 'fadeIn,fadeOut'
// ===========================================================
var animations = [
	'fadeIn,fadeOut',
    'slideInRight,slideOutRight',
    'slideInLeft,slideOutLeft',
    'pulse',
    'fadeInUp,fadeOutDown',
    'zoomIn,zoomOut',
    'bounceInUp,bounceOutDown',
    'flipInY,flipOutY',
    'flipInX,flipOutX',
    'rotateInUpLeft,rotateOutDownLeft',
    'rollIn,rollOut',
    'wobble'
];


// =====================================================
// Добавляет класс анимации ко всем анимированным блокам 
// =====================================================
var addAnimateClass = function(animation) {
    return classes.map(function(item) {
    	return item + '-' + animation + ' ' + item;
    }).join(', ');
}


// ============================================================
// Добавляет задержку если елемент повторяется
// Чтобы убрать задержку, надо контейнеру задать класс no-delay
// ============================================================
var addDelayIfManyItems = function(item) {
   	var currentClass = null;
    var animationDelay = 0.2;
    
    return function(item) {
        if ( item.closest('.lt-block').hasClass('no-delay')) {
        	return;
        }
        if ( item.hasClass(currentClass)) {
            item.css('animation-delay', animationDelay + 's');
            animationDelay = (animationDelay * 10 + 2) / 10;
        } else {
            currentClass = item.attr('class');
            animationDelay = 0.2;
        }

    };
};

// ==========================================================
// Добавляет указанную анимацию ко всем анимированным блокам 
// ==========================================================
var addAnimate = function(animIn, animOut) {
    var addDelayToSameItems = addDelayIfManyItems();
    
	$(addAnimateClass(animIn)).each(function() {  
        addDelayToSameItems($(this));
        
        $(this).addClass('animated');
        if (animIn !== 'pulse') {
        	$(this).addClass('hid'); // Добавляем класс .hid всем анимированным блокам, которые хотим скрыть
        }
        $(this).waypoint( function(dir) {
            if ( dir === 'down' ) {
				
                $(this).addClass('visible').addClass(animIn);
                if (animOut) {
                	$(this).removeClass(animOut);
                }
            }    
            else {
                $(this).removeClass(animIn);
                if (animOut) {
                	$(this).addClass(animOut);
                }
            }
        }, {
            offset: '80%'
        })  
    });
}

$(document).ready(function() { 
    animations.forEach(function(value) {
    	var anim = value.split(',');
        addAnimate(anim[0],anim[1]);
    });
});

// ==========================================================================================================
//	Пример использования:
// 		1) В массив classes добавляем класс блока, которому нужно добавить анимацию.
//			*(если в массиве уже есть этот класс, пропускаем этот пункт)
//
//		2) В массив animations добавляем анимации, которые будут использованы.
//			*(если в массиве уже есть эта анимация, пропускаем этот пункт)
//
//		3) Добавляем класс в настройках блока по принципу 'блок-анимация'
// 			Например: анимация fadeIn(fadeOut) для блока .f-header будет доступна по классу .f-header-fadeIn
//			Анимация будет задаваться так: .f-header-fadeIn .f-header {...}
// ==========================================================================================================